<template>
    <div class="full-screen-div">
        <HeaderComponent v-if="recordInfo!=null" @go-back="goBack" :title="title" />
        <div v-if="recordInfo!=null && nodes.length !=0" class="context">
            <SingleRecord :record-info="recordInfo" :nodes="nodes" />
            <div v-if="recordInfo.statusId > 0" class="action">
                <div class="title">操作</div>
                <el-button type="danger" @click="showCancelDialog = true">驳回</el-button>
                <el-button type="primary" @click="showAgreeDialog = true">同意</el-button>
            </div>
        </div>
    </div>

    <!-- 驳回确认弹窗 -->
    <el-dialog
        title="确认驳回"
        v-model="showCancelDialog"
        width="60%"
        :before-close="handleClose">
        <span>确定要驳回这条申请吗？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showCancelDialog = false">取消</el-button>
                <el-button type="danger" @click="handleCancel">确认驳回</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 同意确认弹窗 -->
    <el-dialog
        title="确认同意"
        v-model="showAgreeDialog"
        width="60%"
        :before-close="handleClose">
        <span>确定要同意这条申请吗？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showAgreeDialog = false">取消</el-button>
                <el-button type="primary" @click="handleAgree">确认同意</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { getPersonalSingleRecord, leaderApproval } from "../../api/approval";
import HeaderComponent from "../../component/Header.vue";
import SingleRecord from "../../component/SingleRecord.vue";
import { getProcessDetail } from "../../api/application.js";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { getSessionStorageObj } from "../../utils/common";
import router from "../../router";
const goBack = () => {
  router.push('/approval'); // 返回申请记录列表页
};

const route = useRoute();
const title = ref();
const recordInfo = ref({});
const nodes = ref([]);
const recordId = ref();
const empId = ref();
const leaderId = ref();
const deptId = ref()
const showCancelDialog = ref(false); // 控制驳回弹窗显示的变量
const showAgreeDialog = ref(false); // 控制同意弹窗显示的变量

const initSingleRecord = async () => {
    console.log("ApplicationSingleRecord mounted");

    console.log("recordId", recordId.value);
    console.log("empId", empId.value);
    const res = await getPersonalSingleRecord(recordId.value, empId.value);
    console.log("获取申请记录", res);
    if (res.flag) {
        recordInfo.value = res.result;
        title.value = recordInfo.value.name + "的" + recordInfo.value.flowName + "申请";
    }

    const nodeRes = await getProcessDetail(recordInfo.value.flowId);
    console.log("获取审批节点", nodeRes);
    if (nodeRes.flag) {
        for (let i = 0; i < nodeRes.result.processNodes.length; i++) {
            if (nodeRes.result.processNodes[i].nodePriority >0) {
                nodes.value.push(nodeRes.result.processNodes[i]);
            }
        }
    }else {
        ElMessage({ message: "获取审批节点失败", type: "error"
    });
    }
};

const handleCancel = async () => {
    const res = await leaderApproval(recordId.value, leaderId.value,deptId.value, false);
    console.log("驳回申请", res);
    if (res.flag) {
        ElMessage.success("驳回成功！");
        showCancelDialog.value = false;
        router.push("/approval");
    } else {
        ElMessage.error("驳回失败：" + res.message);
        showCancelDialog.value = false;
    }
};

const handleAgree = async () => {
    const res = await leaderApproval(recordId.value, leaderId.value,deptId.value, true);
    console.log("同意申请", res);
    if (res.flag) {
        ElMessage.success("同意成功！");
        showAgreeDialog.value = false;
        router.push("/approval");
    } else {
        ElMessage.error("同意失败：" + res.message);
        showAgreeDialog.value = false;
    }
};

const handleClose = () => {
    showCancelDialog.value = false;
    showAgreeDialog.value = false;
};

onMounted(async () => {
    recordId.value = route.params.recordId;
    empId.value = route.params.empId;
    console.log("recordId", recordId.value);
    console.log("empId", empId.value);
    deptId.value = getSessionStorageObj("userInfo").deptId;
    leaderId.value = getSessionStorageObj("userInfo").empId;
    await initSingleRecord();
});
</script>

<style scoped>
.full-screen-div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E1EFFF;
    display: flex;
    flex-direction: column;
}

.context {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 5px;
    height: 80%;
    overflow: scroll;
}

.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #021148;
}

.action {
    position: relative;
    margin: 5px;
    padding: 10px;
    border: 1px solid white;
    border-radius: 5px;
    background-color: #fff;
    width: 90%;
}
</style>